<template>
  <div class="card">
    <div class="title">
      <span v-if="showIndex">{{ item.index }}.</span> {{ item.title }}
    </div>
    <div v-if="item.img" class="img-box">
      <img :src="item.img" alt="img" />
    </div>
    <div class="content">{{ item.content }}</div>
    <slot name="footer"> </slot>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  showIndex: {
    type: Boolean,
    default: false,
  },
  item: {
    type: Object,
    required: true,
  },
});

const handleClick = () => {
  console.log('click');
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.card {
  background-color: #f5f5fa;
  border-radius: 8px;
  padding: 18px;
  .title {
    font-size: 28px;
    padding-bottom: 12px;
    color: #333;
    font-weight: bold;
  }
  .img-box {
    margin: 12px 0;
    width: auto;
    img {
      width: 100%;
      height: auto;
    }
  }
  .content {
    font-size: 26px;
    color: #555;
    line-height: 1.8;
  }
  .footer {
    text-align: right;
  }
}
</style>
